<template>
<div>
      <el-table
      :data="readhistorys"
      style="width: 100%">
      <el-table-column
        prop="title"
        label="文章名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="author"
        label="作者">
      </el-table-column>
      <el-table-column
        prop="intro"
        label="简洁">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        label="操作"
        width="180"
        >
        <template slot-scope="scope">
          <el-button type="success" size="mini" @click="goPage(scope.row.eid)"  round>前往</el-button>
          <el-button type="danger"  size="mini" @click="delHistory(scope.row.eid)" round>删除记录</el-button>
        </template>
      </el-table-column>
    </el-table>
</div>
</template>
<script>
import {mapGetters,mapActions} from 'vuex';
import axios from 'axios';
  export default {
    data() {
      return {}
    },
    computed:{
      ...mapGetters(['readhistorys'])
    },
    methods: {
      delHistory(eid){
        axios.delete(`http://localhost:8081/delHistory/${eid}`).then(res=>{
        console.log(res.data);
        if (res.data.state === 200) {
          alert(res.data.message)
          this.updateUserHistorys(this.$cookies.get('uid'));
        }
        })
      },
      goPage(eid){
        this.$router.push({
          path: `/essaydetail/${eid}`
        })
        this.updateDetail(eid)
      },
      ...mapActions(['updateDetail','updateUserHistorys'])
    }
  }
</script>
<style scoped>
  .bar{
    display: inline-block;
    margin-left: 5px;
  }
</style>